<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <link rel="stylesheet" href="./css/public.css">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.0.1/echarts.min.js"></script>
    <script src="./js/dataOption.js"></script>
    <script src="./js/speedOption.js"></script>
    <title>原神原石时间轴</title>
</head>
<body>
<el-row  id="app" :gutter="20">
    <el-col :span="20">
        <div class="card" :style="{'background-color': `rgba(255, 255, 255, ${uiTransparent / 255})`}">
            <el-row style="margin-bottom: 23px;text-align: center;padding-top: 5px;">
                <el-button plain type="success" size="medium" icon="fas fa-plus" @click="showAddDialog" round> 新增原石</el-button>
                <el-button plain type="success" size="medium" icon="fas fa-plus" @click="showAddMarkerDialog" round> 新增出金</el-button>
                <el-button plain type="primary" size="medium" icon="fas fa-pen" @click="showEditDialog" round> 编辑原石</el-button>
                <el-button plain type="warning" size="medium" icon="fas fa-file-import" @click="showOutJsonDialog = true" round> 导出</el-button>
                <el-button plain type="warning" size="medium" icon="fas fa-file-export" @click="showInJsonDialog = true" round> 导入</el-button>
                <el-button plain type="danger" size="medium" icon="fas fa-times" @click="cleanAll" round> 清除数据</el-button>

                <el-popover
                        placement="bottom"
                        width="320"
                        style="margin-left: 8px;"
                        trigger="click">
                    <el-row style="padding: 10px;">
                        <div style="margin-bottom: 10px;">图表最大值: </div>
                        <el-input  oninput="if(value.length>6)value=value.slice(0,6)"
                                   class="max" type="number" v-model="maxValue" size="medium" style="width: 296px" placeholder="最大值">
                            <el-button @click="changeMax" type="success" size="medium" plain icon="fas fa-check" slot="append"></el-button>
                        </el-input>
                        <el-button-group style="margin-top: -1px;">
                            <el-button @click="maxValue = 0.5 * 180 * 160" style="border-radius: 0px 0px 0px 22px;width: 23%" size="mini">小保底</el-button>
                            <el-button @click="maxValue = 1 * 180 * 160" size="mini" style="width: 23%">大保底</el-button>
                            <el-button @click="maxValue = 2 * 180 * 160" size="mini" style="width: 27%">2x大保底</el-button>
                            <el-button @click="maxValue = 3 * 180 * 160" style="border-radius: 0px 0px 22px 0px;width: 27%;" size="mini">3x大保底</el-button>
                        </el-button-group>

                        <el-divider></el-divider>
                        <div style="margin-bottom: 10px;">图表初始日期: </div>
                        <el-date-picker
                                class="date"
                                value-format="yyyy-MM-dd"
                                v-model="currentBeginDate"
                                type="date"
                                placeholder="选择日期时间">
                        </el-date-picker>
                        <el-button @click="currentBeginDate = '2020-09-15'" style="margin-left: 20px;" type="primary" circle plain icon="fas fa-redo-alt"> </el-button>

                        <el-divider></el-divider>
                        <div style="margin-bottom: 10px;">卡片前景透明度: ({{(uiTransparent / 2.55).toFixed(2)}}%)</div>
                        <div style="padding: 0px 10px">
                            <el-slider :max="255" v-model="uiTransparent"></el-slider>
                        </div>

<!--                        <el-divider></el-divider>-->
<!--                        <span style="margin-bottom: 10px;margin-right: 125px;">显示速度和网站信息</span>-->
<!--                        <el-switch-->
<!--                                v-model="infoDisplay"-->
<!--                                active-value="1"-->
<!--                                inactive-value="0"-->
<!--                                active-color="#13ce66"-->
<!--                                inactive-color="#bbb">-->
<!--                        </el-switch>-->
                        <el-row style="text-align: center;margin-top: 20px;">
                            <el-button @click="resetSetting" icon="fas fa-redo-alt" round type="danger"> 重置配置</el-button>
                            <el-button @click="saveSetting" icon="fas fa-check" round type="primary"> 保存配置</el-button>
                        </el-row>
                    </el-row>
                    <el-button slot="reference" plain type="primary" size="medium" style="margin-right: 8px;" icon="fas fa-tv" round> 显示设置</el-button>
                </el-popover>

                <el-button plain type="info" size="medium" style="margin-right: 8px;" icon="fas fa-info" @click="showInfoDialog = true" round> 关于</el-button>
            </el-row>

            <div id="mainChart" style="height: 84vh;width: 100%;margin-left: -2.6vw"></div>

            <el-dialog
                title="新增数据"
                :close-on-click-modal="false"
                :visible.sync="addDialogVisible"
                width="30%">
                <el-form :model="addFrom" :rules="rules" ref="addForm" label-width="120px">
                    <el-form-item label="记录日期: " prop="dateTime">
                        <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="addFrom.dateTime"
                                type="datetime"
                                style="width: 100%"
                                clearable
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="现存原石: " prop="yuanshi">
                        <el-input type="number" clearable v-model="addFrom.yuanshi"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button icon="el-icon-close" round type="danger" @click="addDialogVisible = false">取消</el-button>
                    <el-button icon="el-icon-check" round type="primary" @click="saveYuanshi">确定</el-button>
                </span>
            </el-dialog>

            <el-dialog
                    title="本地源数据,备份请复制"
                    :visible.sync="showOutJsonDialog"
                    width="70%">
                <span>{"date": {{myOption.series[0].data}},"marker":{{myOption.series[0].markPoint.data}}}</span>
            </el-dialog>

            <el-dialog
                    title="关于genshin-yuanshi"
                    :visible.sync="showInfoDialog"
                    width="40%">
                <h2 style="color: #fd4e4e">* 该页面所有保存的操作数据都仅保存在本地</h2><br>
                <p>1. 若要在其他浏览器或其他设备查看数据请点击[导出Json]复制字符串,然后到新浏览器或新设备中点击[导入Json覆盖]在输入框处粘贴Json字符串</p><br>
                <p>2. <font :color="colors.default2"> [2.0] 10-1 神里? </font>等灰色标题头均为预测结果,仅供参考</p><br>
                <p>3. <font :color="colors.fire"> [1.0] 10-20 可莉 </font>等带元素颜色标题头均为已确定角色</p><br>
                <p>4. 预测以最近的2次以上5次以下的连续增加记录进行计算,不满足条件不会显示预测趋势线</p><br>
                <p>5. 保底线,一般(大多数不会超过)以80抽出金, 极限保底线,最坏情况下以90抽出金</p><br>
                <br>
                <br><br><br><br>
                <p style="color: #bbb;text-align: center">qyn</p>
            </el-dialog>

            <el-dialog
                    title="导入Json"
                    :close-on-click-modal="false"
                    :visible.sync="showInJsonDialog"
                    width="70%">
                <el-input type="textarea" :rows="12" clearable v-model="importJson"></el-input>
                <span slot="footer" class="dialog-footer">
                    <el-button icon="el-icon-close" round type="danger" @click="showInJsonDialog = false">取消</el-button>
                    <el-button icon="el-icon-check" round type="primary" @click="importData">覆盖导入</el-button>
                </span>
            </el-dialog>

            <el-dialog
                    title="添加出金记录"
                    :close-on-click-modal="false"
                    :visible.sync="addMarkerDialog"
                    width="30%">
                <el-form :model="marketForm" :rules="rules" ref="marketForm" label-width="120px">
                    <el-form-item label="五星名称: " prop="roleName">
                        <el-input v-model="marketForm.roleName" maxlength="5" clearable style="width: 100%"></el-input>
                    </el-form-item>
                    <el-form-item label="出货时间: " prop="roleDate">
                        <el-date-picker
                                value-format="yyyy-MM-dd HH:mm:ss"
                                v-model="marketForm.roleDate"
                                type="datetime"
                                style="width: 100%"
                                clearable
                                placeholder="选择日期时间">
                        </el-date-picker>
                    </el-form-item>

                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button icon="el-icon-close" round type="danger" @click="addMarkerDialog = false">取消</el-button>
                    <el-button icon="el-icon-check" round type="primary" @click="AddMarket">确定</el-button>
                </span>
            </el-dialog>

            <el-dialog
                    title="编辑数据"
                    :close-on-click-modal="false"
                    :visible.sync="editDialogVisible"
                    width="90%">
                <el-form label-width="70px">
                    <el-row style="max-height: 500px;overflow-y: scroll;padding-right: 30px;">
                        <el-col :span="11" v-for="(item,index) in myOption.series[0].data" :key="item" :offset="index%2 * 2">
                            <el-row>
                                <el-col :span="12">
                                    <el-form-item label="时间: ">
                                        <el-date-picker
                                                value-format="yyyy-MM-dd HH:mm:ss"
                                                v-model="item[0]"
                                                type="datetime"
                                                style="width: 100%"
                                                clearable
                                                placeholder="选择日期时间">
                                        </el-date-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="9" :offset="1">
                                    <el-form-item label="原石: ">
                                        <el-input type="number" style="width: 100%" v-model="item[1]"></el-input>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="2" style="text-align: right;padding-top: 5px;">
                                    <el-button circle size="mini" plain icon="el-icon-close" type="danger" @click="deleteData(index)"></el-button>
                                </el-col>
                            </el-row>
                        </el-col>
                    </el-row>
                </el-form>

                <span slot="footer" class="dialog-footer">
                    <el-button icon="el-icon-close" round type="danger" @click="editDialogVisible = false">取消</el-button>
                    <el-button icon="el-icon-check" round type="primary" @click="saveEditData">确定</el-button>
                </span>
            </el-dialog>
        </div>
    </el-col>
    <el-col :span="4" >
        <div class="card" :style="{'background-color': `rgba(255, 255, 255, ${uiTransparent / 255})`}">
            <div style="font-size: 16px;text-align: center;margin-top: 10px;color: #666">预测一个月获得原石的速度</div><br>
            <div id="speedChart" style="width: 100%;height: 30vh"></div>
        </div>
        <div class="card" style="padding: 0;margin-top: 20px;overflow: hidden" :style="{'background-color': `rgba(255, 255, 255, ${uiTransparent / 255})`}">
            <div :style="{'width': `${mouthPro}%`}" style="height: 70px;background: rgba(154,264,52, 0.7);border-radius: 22px;text-align: center">

            </div>
            <div style="text-align: center;line-height: 70px;margin-top: -70px;font-size: 18px;">到达大保底 {{mouthPro}}%</div>
        </div>
        <div class="card" :style="{'background-color': `rgba(255, 255, 255, ${uiTransparent / 255})`}" style="margin-top: 20px;text-align: center;">
            <div style="font-size: 16px;margin-top: 10px;color: #666">
                游戏版本<br>
                v1.4
            </div><br>
        </div>
        <div class="card" :style="{'background-color': `rgba(255, 255, 255, ${uiTransparent / 255})`}" style="margin-top: 20px;text-align: center;">
            <div style="font-size: 17px;margin-top: 10px;color: #666">
                作者<br>
                <font color="#38c552">Gitqyn</font>
            </div><br>
        </div>
    </el-col>
</el-row>
</body>
<script type="application/javascript" src="./js/vueapp.js"></script>
</html>